<template>
  <a-spin :spinning="loading" size="large">
    <div class="plans">
      <div class="cycle-info">
        <van-cell title="需要您处理异常">
          <template #label>
            <div class="cycle-desc">{{  dataInfo.bldgName }}发现异常情况，请及时处理</div>
          </template>
        </van-cell>
      </div>

      <van-cell>
        <h3 style="font-weight: 700;">检查详情</h3>
        <div class="plan-content">
          <div class="plan-info">
            <div class="plan-name">报警地址：{{ dataInfo.bldgName }}-{{ dataInfo.position }}</div>
            <div class="plan-name">报警类型：{{ getTypeText(dataInfo.type) }}</div>
          </div>
          <div class="cycle-time">
            <span>报警时间：{{ dataInfo.dateTime }}</span>
          </div>
        </div>
      </van-cell>
      <van-cell>
        <h3 style="font-weight: 700;">异常情况</h3>
        <div class="plan-content">
          <div class="plan-info">
            <div class="plan-name">异常项：{{ dataInfo.warningName }}</div>
            <div class="plan-description">说明：{{ dataInfo.content }}</div>
          </div>
        </div>
      </van-cell>
      <van-cell>
        <h3 style="font-weight: 700;">设备情况</h3>
        <div class="plan-content">
          <div class="plan-info">
            <div class="plan-name">设备名称：{{ dataInfo.deviceName }}</div>
            <div class="plan-name">设备状态：{{ dataInfo.deviceIsOnline == 1 ? '在线' : '离线' }}</div>
          </div>
        </div>
      </van-cell>
      <van-cell>
        <h3 style="font-weight: 700;">相关人员</h3>
        <div class="plan-content">
          <div class="plan-info">
            <div class="plan-name">科室：{{ dataInfo.deptName }}</div>
            <div class="plan-name">管理人员：{{ dataInfo.manageUserName }}</div>
          </div>
        </div>
      </van-cell>
    </div>
  </a-spin>
</template>

<script setup>
  import { ref, onMounted, inject } from "vue"
  import { Button as VanButton } from "vant";
  import { useRoute } from "vue-router";
  import router from "@/route/index.js";
  import { getWarningLot } from "@/api/common.js";
  import moment from "moment"

  const toast = inject("toast");
  const loading = ref(false),
    route = useRoute(),
    isUpdate = ref(true); //修改和详情
  const userInfo = ref(JSON.parse(localStorage.getItem("SAVE_USER_INFO")))
  const dataInfo = ref({});

  onMounted(() => {
    getList()
  })

  function getList() {
    loading.value = true
    getWarningLot({ id: route.query.id }).then(res => {
      if(res.code == 200) {
        loading.value = false
        dataInfo.value = res.data
      } else {
        loading.value = false
        toast.error(res.message)
      }
    }, err => {
      toast.error(err.message)
      loading.value = false;
    })
  }

  function getTypeText(val) {
    const texts = {
      '1': '水表',
      '2': '电表',
    }
    return texts[val]
  }

</script>

<style lang="less" scoped>
</style>